var Ambient = Vue.component('ambient', {
    data() {
        return {
            editStatus: true,       // 是否可编辑
            infoData: {},           // 当前页面显示的图片数据
            infoDataOld: {},        // 数据库存储的图片数据
        }
    },

    template: `<div class="identity__box">
                <div class="identity__con">
                    <h3 class="index__title identity__title">公司环境</h3>
                    <div class="index__info identity__info">
                        <div class="identity__info__list">
                            <span>总经理：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.managerShow">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="managerShow" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>副总经理：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.facManagerShow">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="facManagerShow" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>总监：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.financeShow">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="financeShow" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>总经办：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.guardShow">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="financeShow" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>财务部：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.shapes">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="shapes" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>行政部：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.rawShow">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="rawShow" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>营销部：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.techShow">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="techShow" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>拓展部：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.workShow">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="workShow" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>设计部：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.backShow">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="backShow" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>采购部：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.cuts">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="cuts" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                        <div class="identity__info__list">
                            <span>电商部：</span>
                            <div class="identity__img__list">
                                <div class="identity__img">
                                    <img :src="infoData.samples">
                                    <!--i v-show="!editStatus">删除</i -->
                                </div>
                                <div class="identity__img__btn" v-show="!editStatus">
                                    <input type="file" data-name="samples" @change="uploadImg">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="common__btn">
                        <div class="common__btn__box">
                            <span class="common__btn__sure" v-show="editStatus" @click="setEditFun">编辑</span>
                            <span class="common__btn__close" v-show="!editStatus" @click="setCancelFun">取消</span>
                            <span class="common__btn__sure" v-show="!editStatus" @click="updateUserInfo">保存设置</span>
                        </div>
                    </div>
                </div>
            </div>`,

    methods: {
        setEditFun: function () {  // 编辑
            this.editStatus = !this.editStatus
        },
        setCancelFun: function () { // 取消
            var data = JSON.stringify(this.infoDataOld);
            this.infoData = JSON.parse(data);
            this.editStatus = !this.editStatus;
        },
        uploadImg(e) {
            // 上传图片
            var _target = e.target;
            var _name = _target.dataset.name;
            var _files = _target.files[0];
            onUploadImg(_files, (res) => {
                if(res.code == 0) {
                    this.infoData[_name] = res.data.img;
                }
            })
        },
        getTypeInfo() {
            // 获取产品种类
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/factory/fac-env-file",
                data: {
                    type: 'gs',
                    app_access: _AppAccess,
                    token: localStorage.getItem('token')
                },
                success:function(res){
                    if(0 == res.code) {
                        var data = JSON.stringify(res.data);
                        self.infoData = JSON.parse(data);
                        self.infoDataOld = JSON.parse(data);
                    }
                }
            })
        },
        updateUserInfo() {
            // 修改用户信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/factory/fac-env-upload",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    type: "gs",
                    envs: JSON.stringify(this.infoData)
                },
                success:function(res){
                    if(0 == res.code) {
                        ELEMENT.Message.success('保存成功');
                        self.editStatus = !self.editStatus;
                    }
                }
            })
        }
    },

    mounted() {
        
    },
    
    created() {
        this.getTypeInfo();
    },
})